<!--2019/5/22 23:37. by soft-->
<#assign title="学生报修" repairs='this'>
<#include 'header.ftl'>
<div class="layui-card">
  <div class="layui-card-header">
    <div class="card-title">
      学生报修管理
    </div>
    <div class="header-tools">
    </div>
  </div>
  <div class="layui-card-body">
    <table id="tables" lay-filter="tables"></table>
  </div>
</div>

<#--维修员信息-->
<script type="text/html" id="maintainerInfo">
  <div class="layer-dialog">
    <div class="layui-row form-label-left min-form-item">
      <div class="layui-col-xs12">
        <div class="layui-form-item">
          <div class="flex between form-info">
            <div>{{maintainerStatus(d)}}</div>
            <div>入职时间：{{d.datetime}}</div>
          </div>
        </div>
      </div>
      <div class="layui-col-xs6">
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <div class="layui-input">{{d.name}}</div>
          </div>
        </div>
      </div>
      <div class="layui-col-xs6">
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <div class="layui-input">{{sex(d.sex)}}</div>
          </div>
        </div>
      </div>

      <div class="layui-col-xs12">
        <div class="layui-form-item">
          <label class="layui-form-label">电话</label>
          <div class="layui-input-block">
            <div class="layui-input">{{d.tel}}</div>
          </div>
        </div>
      </div>

      <div class="layui-col-xs12">
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-block">
            <div class="layui-input">{{d.email}}</div>
          </div>
        </div>
      </div>
      <div class="layui-col-xs12">
        <div class="layui-form-item">
          <label class="layui-form-label">负责楼</label>
          <div class="layui-input-block">
            <div class="layui-input">{{d.fs}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>

<#--分配维修员-->
<script type="text/html" id="allotMaintainer">
  <div class="layer-dialog">
    <form class="layui-form">
      <input type="hidden" name="id" value="{{d.id?d.id:''}}">
      <div class="layui-form-item">
        <select name="maintainerId" class="layui-select">
          {{# layui.each(d.ms, function(k, v) { }}
          <option value="{{v.id}}" {{v.id==d.mid?'selected':''}}>{{v.name}}</option>
          {{# }) }}
        </select>
      </div>

      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="allot">指定</button>
      </div>
    </form>
  </div>
</script>

<#--报修信息-->
<script type="text/html" id="repairInfo">
  <div class="layer-dialog">
    <div class="layui-row form-label-left min-form-item">
      <div class="layui-col-xs12 layui-form-item-nc">
        <div class="flex between form-info">
          <div>
            <span>{{repairStatus(d)}}</span>
            <span>
              <span class="layui-icon layui-icon-rate-solid"></span>
              <span class="layui-icon layui-icon-rate-solid"></span>
              <span class="layui-icon layui-icon-rate-solid"></span>
              <span class="layui-icon layui-icon-rate"></span>
              <span class="layui-icon layui-icon-rate"></span>
            </span>
          </div>
          <div><span class="layui-bg-black layui-badge">{{d.houseNo}}# {{d.roomNo}}</span></div>
        </div>
      </div>
      <div class="layui-col-xs6 layui-form-item-nc">
        <label class="layui-form-label">报修人</label>
        <div class="layui-input-block">
          <div class="layui-input">{{d.name}}</div>
        </div>
      </div>
      <div class="layui-col-xs6 layui-form-item-nc">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
          <div class="layui-input">{{d.tel}}</div>
        </div>
      </div>

      <div class="layui-col-xs6 layui-form-item-nc">
        <label class="layui-form-label">时间上</label>
        <div class="layui-input-block">
          <div class="layui-input">{{d.startTime}}</div>
        </div>
      </div>
      <div class="layui-col-xs6 layui-form-item-nc">
        <label class="layui-form-label">时间下</label>
        <div class="layui-input-block">
          <div class="layui-input">{{d.endTime}}</div>
        </div>
      </div>

      <div class="layui-col-xs12 layui-form-item-nc">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
          <textarea readonly class="layui-textarea min-textarea">{{d.explains?d.explains:''}}</textarea>
        </div>
      </div>

      <div class="layui-col-xs12 layui-form-item-nc">
        <label class="layui-form-label">报告</label>
        <div class="layui-input-block">
          <textarea readonly class="layui-textarea min-textarea">{{d.report?d.report:''}}</textarea>
        </div>
      </div>

      <div class="layui-col-xs12 layui-form-item-nc">
        <label class="layui-form-label">评价</label>
        <div class="layui-input-block">
          <textarea readonly class="layui-textarea min-textarea">{{d.comment?d.comment:''}}</textarea>
        </div>
      </div>
      <div class="layui-col-xs6 layui-form-item-nc">
        <label class="layui-form-label">维修</label>
        <div class="layui-input-block">
          <div class="layui-input">{{d.reportTime?d.reportTime:''}}</div>
        </div>
      </div>
      <div class="layui-col-xs6 layui-form-item-nc">
        <label class="layui-form-label">评价</label>
        <div class="layui-input-block">
          <div class="layui-input">{{d.commentTime?d.commentTime:''}}</div>
        </div>
      </div>
    </div>
  </div>
</script>

<#--维修报告-->
<script type="text/html" id="reportBox">
  <div class="layer-dialog">
    <form class="layui-form">
      <input type="hidden" name="id" value="{{d.id?d.id:''}}">
      <div class="layui-form-item">
        <textarea class="layui-textarea min-textarea" name="report" placeholder="填写维修报告"
                  lay-verify="required" lay-verType="tips" maxlength="200">{{d.report?d.report:''}}</textarea>
      </div>

      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="report">提交</button>
      </div>
    </form>
  </div>
</script>

<script>
  var methods, layerIndex;
  layui.use(['laytpl', 'table', 'layer', 'form', 'jquery'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.$;
    var laytpl = layui.laytpl;

    table.render({
      elem: '#tables',
      method: 'post',
      url: '/api/repair/page',
      page: true,
      cols: [[
        {title: '序号', type: 'numbers'},
        {title: '报修人', field: 'name', width: 70},
        {
          title: '房间号', templet: function (s) {
            return '<span class="layui-badge layui-bg-gray">' + s.houseNo + '#' + s.roomNo + '</span>'
          }, width: 100
        },
        {title: '电话', field: 'tel'},
        {title: '故障描述', field: 'explains'},
        {title: '预约时间(上)', field: 'startTime'},
        {title: '预约时间(下)', field: 'endTime'},
        {title: '状态', templet: repairStatus, width: 80},
        {
          title: '维修工', templet: function (s) {
            var name = '';
            if (s.status !== '已取消') {
              name = '<button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="allot">分配</button>'
            }
            if (s.maintainer) {
              name = '<span class="layui-badge layui-bg-cyan hb" lay-event="showMaintainer">' + s.maintainer.name + '</span>'+
                  '<span class="layui-badge layui-bg-blue hb" title="点击调整" lay-event="allot">R</span>'
            }
            return name;
          }, width: 100
        },
        {title: '维修时间', field: 'reportTime'},
        {
          title: '操作', templet: function (s) {
            var wx = '';
            if (s.maintainer) {
              wx = '<button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="report">维修</button>';
            }
            return '<button class="layui-btn layui-btn-xs" lay-event="look">查看</button>' + wx;
          }, width: 115, fixed: 'right'
        }
      ]],
      parseData: parseData
    }); // table

    var $allotMaintainer = $('#allotMaintainer'),
        $maintainerInfo = $('#maintainerInfo'),
        $repairInfo = $('#repairInfo'),
        $reportBox = $('#reportBox');

    methods = {
      report: function(rp) {
        laytpl($reportBox.html()).render(rp, function (html) {
          methods.dialog(html, '维修报告');
        })
      },
      showMaintainer: function (rp) {
        var mt = rp.maintainer;
        laytpl($maintainerInfo.html()).render(mt, function (html) {
          methods.dialog(html, '维修员信息', 450, true);
        })
      },
      look: function (rp) {
        console.log(rp)
        laytpl($repairInfo.html()).render(rp, function (html) {
          methods.dialog(html, '报修详情', 500, true);
        })
      },
      allot: function (rp) {
        $.post('/admin/maintainer/list', {hno: rp.houseNo}, function (data) {
          if (data.success) {
            var mid;
            if (rp.maintainer) mid = rp.maintainer.id;
            laytpl($allotMaintainer.html()).render({ms: data.payload, id: rp.id, mid: mid}, function (html) {
              methods.dialog(html, "分配维修员", 230)
            })
          }
        })
      },
      del: function (nt) {
        layer.alert('确定删除房间【' + nt.houseNo + "#" + nt.roomNo + '】', {title: '确定提示', icon: 3}, function (index) {
          $.post('/admin/froom/del/' + nt.id, function (data) {
            layer.msg('删除成功!', {icon: 6, time: 1200})
            table.reload('tables')
          })
          layer.close(index)
        })
      },
      dialog: function (html, title, w, sc) {
        var wi = 450;
        if (w != null) wi = w;
        layerIndex = layer.open({
          type: 1,
          shadeClose: sc,
          area: wi + 'px',
          title: title ? title : '添加楼层',
          content: html
        });
        form.render('select');
      }
    }

    // 事件
    table.on("tool(tables)", function (e) {
      methods[e.event](e.data, e.tr);
    });

    form.on('submit(add)', function (fo) {
      $.post('/admin/froom/add', fo.field, function (data) {
        if (data.success) {
          layer.msg('添加成功！', {icon: 6, time: 1200});
          layer.close(layerIndex);
          table.reload('tables')
        } else {
          layer.alert(data.msg, {title: '错误详情', icon: 2})
        }
      });
      return false;
    })

    form.on('submit(edit)', function (fo) {
      $.post('/admin/froom/change', fo.field, function (data) {
        if (data.success) {
          layer.msg('修改成功！', {icon: 6, time: 1200});
          layer.close(layerIndex);
          table.reload('tables')
        } else {
          layer.alert(data.msg, {title: '错误详情', icon: 2})
        }
      });
      return false;
    })

    form.on('submit(allot)', function (fo) {
      $.post('/api/repair/allot', fo.field, function (data) {
        if (data.success) {
          layer.msg('分配成功！', {icon: 6, time: 1200});
          layer.close(layerIndex);
          table.reload('tables')
        } else {
          layer.alert(data.msg, {title: '错误详情', icon: 2})
        }
      });
      return false;
    })

    form.on('submit(report)', function (fo) {
      console.log(fo)
      $.post('/api/repair/report', fo.field, function (data) {
        if (data.success) {
          layer.msg('维修报告成功！', {icon: 6, time: 1200});
          layer.close(layerIndex);
          table.reload('tables')
        } else {
          layer.alert(data.msg, {title: '错误详情', icon: 2})
        }
      });
      return false;
    })

  });
</script>

<#include 'footer.ftl'>